<template>
  <!-- 容器 -->
  <el-container class="home-container">
    <!-- 侧边栏 -->
    <el-aside :width="isCollapse ? '64px' : '200px'">
      <div class="home_projectName">{{ isCollapse ? "V" : "DemoVue" }}</div>
      <div class="toggle-button" @click="toggleClick">|||</div>
      <!-- 侧边栏菜单 -->
      <!--  :router=true或者只写router, 表示开启路由模式,以菜单绑定的index值作为路由路径-->
      <!-- default-active默认激活的菜单 -->
      <!-- <el-menu :unique-opened="true" background-color="#333744" text-color="#fff" active-text-color="#409eff" :collapse="isCollapse" :collapse-transition="true" router :default-active="store.state.tags.activePath"> -->
      <!-- 一级菜单 -->
      <!-- <el-sub-menu v-for="item in menuData.value" :index="item.id" :key="item.id" @click="changBackColor(item.id)"> -->
      <!-- 一级菜单的模板区域 -->
      <!-- <template #title> -->
      <!-- 图标 -->
      <!-- <i :class="iconObj[item.id]"></i> -->
      <!-- 文本 -->
      <!-- <div class="sub_menu" :style="{ background: item.isActive == true ? '#409eff' : '#333744' }"></div> -->
      <!-- <el-icon> -->
      <!-- <component :is="item.icon"></component> -->
      <!-- </el-icon> -->
      <!-- <span>{{ item.authName }}</span> -->
      <!-- </template> -->
      <!-- 二级菜单 -->
      <!-- <el-menu-item v-for="childItem in item.children" :index="childItem.path" :key="childItem.id" @click="selectMenu(childItem)"> -->
      <!-- <template #title> -->
      <!-- 图标 -->
      <!-- <el-icon><component is="Menu"></component></el-icon> -->
      <!-- <span>{{ childItem.authName }}</span> -->
      <!-- </template> -->
      <!-- </el-menu-item> -->
      <!-- </el-sub-menu> -->
      <!-- </el-menu> -->
      <home-menu :isCollapse="isCollapse"></home-menu>
    </el-aside>
    <!-- 次容器 显示二级菜单跳转的内容 -->
    <el-container>
      <el-header height="200px">
        <div class="home_tags">
          <!-- 使用tag来与导航栏联动   for 循环  click 点击事件  close 关闭事件 :closable  是否可以关闭 主页不能关闭  effect 如果是当前活跃的路由  那么就是深色的 不是当前路由的  就是浅色的-->
          <el-tag v-for="(item, index) in store.state.tags.tagList" size="large" @click="clickTag(item)" :closable="item.path != 'welcome'" @close="closeTag(item, index)" :effect="item.path == store.state.tags.activePath ? 'dark' : 'plain'">{{ item.authName }}</el-tag>
        </div>
        <div>
          <el-button type="primary" @click="loginOut" class="login_out">退出</el-button>
        </div>
      </el-header>
      <el-main>
        <!-- vue3  页面缓存要这么写  v-slot是固定语法  :include里面是要缓存的组件的name的集合 -->
        <router-view v-slot="{ Component }">
          <keep-alive :include="store.state.tags.cachePageList">
            <component :is="Component" />
          </keep-alive>
        </router-view>
      </el-main>
      <!-- <el-footer>Footer</el-footer> -->
    </el-container>
  </el-container>
</template>
<script setup>
import { getCurrentInstance, ref, reactive, toRefs, onBeforeMount, onMounted } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { localStorageUtils } from "assets/js/utils";
import HomeMenu from "./component/HomeMenu";
const { proxy } = getCurrentInstance();
const router = useRouter();
const store = useStore();

const isCollapse = ref(false);
onMounted(() => {
  router.push(store.state.tags.activePath); //页面初始化之后跳转到活跃页
});
//点击折叠图标
const toggleClick = () => {
  isCollapse.value = !isCollapse.value;
};
//退出登录
const loginOut = () => {
  router.push("/login");
  store.commit("user/setUserInformation", "");
};
//选中tags标签页
const clickTag = (item) => {
  const activePath = store.state.tags.activePath;
  if (activePath == item.path) return;
  store.commit("tags/changMenu", item.path);
  router.push(item.path);
  // changMenuNavigation();
  proxy.$bus.emit("changMenuNavigation");
};
//关闭tags标签页
const closeTag = (item, index) => {
  const oldActivePath = store.state.tags.activePath;
  const oldTagList = store.state.tags.tagList;
  //判断是否包含要删除的tag
  if (oldTagList.indexOf(item) === -1) return;
  //在tag列表中删除要去掉的页签
  oldTagList.splice(index, 1);
  //删除缓存
  store.commit("tags/removeKeepAliveCache", item.componentName);
  //如果不是活跃页面,直接退出
  if (oldActivePath !== item.path) return;
  //判断是否只剩下首页
  if (oldTagList.length < 1) {
    router.push("welcome");
    store.commit("tags/closeTag", {
      activePath: "welcome",
      tagList: oldTagList,
    });
    // changMenuNavigation();
    proxy.$bus.emit("changMenuNavigation");

    return;
  }
  //其他时候,活跃菜单左移
  const leftTag = oldTagList[index - 1];
  router.push(leftTag.path);
  store.commit("tags/closeTag", {
    activePath: leftTag.path,
    tagList: oldTagList,
  });
  // changMenuNavigation();
  proxy.$bus.emit("changMenuNavigation");
};
</script>
<style lang="less" scoped>
.home-container {
  //   height: 100%;
  height: 100vh;
  overflow-y: hidden;
}
.el-aside {
  background-color: #333744;
  transition: all 0.8s ease;
  .home_projectName {
    height: 60px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.el-header {
  background-color: #373d41;
  height: 60px;
  // 弹性布局
  display: flex;
  //弹性布局,定义了项目在主轴上的对齐方式,两端对齐，项目之间的间隔都相等
  justify-content: space-between;
  padding-left: 0px;
  //弹性布局,使按钮上下居中
  align-items: center;
  color: #ffff;
  font-size: 20px;
  > div {
    display: flex;
    align-items: center;
    span {
      margin-left: 15px;
    }
  }
}
.el-main {
  background-color: #eaedf1;
  height: calc(100vh - 60px);
  overflow-y: auto;
}
.toggle-button {
  background-color: #4a5064;
  font-size: 10px;
  line-height: 24px;
  color: #fff;
  text-align: center;
  //让字符之间有距离
  letter-spacing: 0.2em;
  cursor: pointer;
}
.login_out {
  position: relative;
  float: right;
}
</style>
